<template>
  <div class="home">
    <Head />

    <Option />

    <div class="middle">
      <img src="../../images/house.jpg" alt />
      <span>附近商家</span>
    </div>

    <List :list="List" />

    <Load :show="show" @fun="getList" />
  </div>
</template>
<script>
import Head from './Head.vue' //引入头部组件
import { Toast } from 'mint-ui' // 引入mint-ui的提示组件
import Option from './Option' //引入滑动选项组件
import List from '../common/List.vue' //引入展示组件
import Load from '../common/Load'
export default {
  components: {
    Head,
    Option,
    List,
    Load
  },
  data() {
    return {
      List: [],
      show: null
    }
  },
  methods: {
    getList() {
      this.show = 1
      let guess = JSON.parse(localStorage.getItem('guess'))
      this.$http
        .get('shopping/restaurants', {
          params: {
            latitude: guess.latitude,
            longitude: guess.longitude,
            offset: this.List.length
          }
        })
        .then(data => {
          this.show = 3
          this.List.push(...data.body)
          localStorage.setItem('shopList', JSON.stringify(this.List))
          Toast({
            message: '加载成功',
            duration: 1000
          })
        })
        .catch(() => {
          Toast({
            message: '加载失败',
            duration: 2000
          })
          this.show = 2
        })
    },
    query() {
      let shopList = JSON.parse(localStorage.getItem('shopList'))
      if (shopList) {
        //window.console.log(shopList)
        this.List = shopList
        this.show = 3
      } else {
        this.getList()
      }
    }
  },
  created() {
    this.query()
  }
}
</script>
<style scoped>
.home {
  padding-top: 13vw;
}
.mint-swipe {
  height: 140px;
}
.mint-swipe-indicator {
  background-color: black;
}
.middle {
  background-color: white;
  border-top: 1px #aaa solid;
  margin-top: 10px;
  font-size: 3vw;
  height: 8vw;
  color: #aaa;
  display: flex;
}
.middle > span {
  font-size: inherit;
  align-self: center;
}
.middle > img {
  margin: 0 5px;
  align-self: center;
  height: 5vw;
  width: 5vw;
}
p {
  text-align: center;
}
a {
  color: #aaa;
  font-size: 1.3rem;
}
</style>